/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <div 
    class='transformImg-container' 
    v-interaction='{
      handlers: {
        onRotateStart: rotateStart,
        onRotateMove: rotateMove,
      },
      configs: { enableScale: true, enableRotate: true },
    }'
  >
    <img src='../../assets/images/artwork.svg' alt='image' class='transformImg-content' :style='{
      transform: `translate(${translateX}px, ${translateY}px) scale(${scale}) rotate(${rotation}deg)`,
      "transform-origin": "center center",
    }' />
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
import { PointerState } from '@hadss/web_uni_input';

interface FingerInfo {
  id: number;
  globalX?: number;
  globalY?: number;
  localX?: number;
  localY?: number;
  displayX?: number;
  displayY?: number;
  hand?: 'LEFT' | 'RIGHT' | 'NONE' | string;
}

const scale = ref<number>(1);
const minScale = ref<number>(0.3);
const maxScale = ref<number>(1);
const rotation = ref<number>(0);
const translateX = ref<number>(0);
const translateY = ref<number>(0);
const lastRotation = ref<number>(0);
const startDist = ref<number>(1);
const startAngle = ref<number>(1);
const lastScale = ref<number>(1);

const getDistance = (p1: FingerInfo, p2: FingerInfo): number => {
  if (p1.globalX && p1.globalY && p2.globalX && p2.globalY) {
    const dx = p2.globalX - p1.globalX;
    const dy = p2.globalY - p1.globalY;
    return Math.hypot(dx, dy);
  }
  return 1;
};

const getAngle = (p1: FingerInfo, p2: FingerInfo) => {
  if (p1.globalX && p1.globalY && p2.globalX && p2.globalY) {
    const dx = p2.globalX - p1.globalX;
    const dy = p2.globalY - p1.globalY;
    return Math.atan2(dy, dx) * 180 / Math.PI;
  }
  return 0;
};

const rotateStart = (e: PointerState): void => {
  if (e.fingerList?.length === 1) {
    return;
  } else if (e.fingerList?.length === 2) {
    startDist.value = getDistance(e.fingerList[0], e.fingerList[1]);
    startAngle.value = getAngle(e.fingerList[0], e.fingerList[1]);
    lastScale.value = scale.value;
    lastRotation.value = rotation.value;
  }
};

const rotateMove = (e: PointerState): void => {
  if (e.fingerList?.length === 1) {
    return;
  } else if (e.fingerList?.length === 2) {
    const newDist = getDistance(e.fingerList[0], e.fingerList[1]);

    let newScale = lastScale.value * (newDist / startDist.value);
    newScale = Math.max(minScale.value, Math.min(maxScale.value, newScale));
    scale.value = newScale;

    const newAngle = getAngle(e.fingerList[0], e.fingerList[1]);
    const diff = newAngle - startAngle.value;
    rotation.value = lastRotation.value + diff;
  }
};
</script>

<style lang='less' scoped>
@import './index.less';
</style>